<template>
  <div class="treasureHunt">
    <div class="banner">
      <img src="@/assets/img/activity/anniversary/bannerWord.png" alt=""
      v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
      <img src="@/assets/img/activity/anniversary/bannerWordEn.png" alt=""
      style="width: 700px;"
      v-else>
    </div>
    <!-- 活动规则 -->
    <div class="rules">
      <div class="title">{{ $t('anniversary.activityRuleTitle') }}</div>
      <div class="rulesCont">
        <div class="tag mb15">
          {{ $t('anniversary.willRelease') }}
        </div>
        <div class="tag mb15">{{ $t('anniversary.actiTime') }}</div>
        <div class="tag">{{ $t('anniversary.activityRuleTitle') }}：</div>
        <div class="rules">{{ $t('anniversary.jigsaw1') }}</div>
        <div class="rules">{{ $t('anniversary.jigsaw2') }}</div>
        <!-- <div class="rules">{{ $t('anniversary.jigsaw3') }}
          <a class="colorThis"
            target="_blank"
            v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'"
            href="https://newdex.zendesk.com/hc/zh-cn/requests/new">
            {{ $t('anniversary.jigsaw5') }}
          </a>
          <a class="colorThis"
            target="_blank"
            v-else
            href="https://newdex.zendesk.com/hc/en-us/requests/new">
            {{ $t('anniversary.jigsaw5') }}
          </a>
        </div> -->
        <div class="rules mb15">{{ $t('anniversary.jigsaw4') }}</div>
        <div class="tag mb15">
          {{ $t('anniversary.newTip') }}
          <a class="colorThis"
            target="_blank"
            v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'"
            href="https://newdex.zendesk.com/hc/zh-cn/articles/360031685271-%E6%84%9F%E8%B0%A2%E6%9C%89%E6%82%A8-%E5%AF%86%E9%92%A5%E5%A4%A7%E5%AF%BB%E5%AE%9D">
            {{ $t('anniversary.willRelease1') }}
          </a>
          <a class="colorThis"
            target="_blank"
            v-else
            href="https://newdex.zendesk.com/hc/en-us/articles/360031685271--Treasure-Hunt-for-the-Private-Key">
            {{ $t('anniversary.willRelease1') }}
          </a>
        </div>
        <div class="tag">
          {{ $t('anniversary.notes') }}
          <!-- <div class="wordList">
            <span>{{ $t('anniversary.notes') }}</span>
            <span>1.{{ $t('anniversary.newTip1') }}</span>
          </div>
          <div class="wordList">
            <span></span>
            <span>2.{{ $t('anniversary.notes1') }}</span>
          </div>
          <div class="wordList">
            <span></span>
            <span>3.{{ $t('anniversary.notes2') }}</span>
          </div> -->
        </div>
        <div class="rules">1.{{ $t('anniversary.newTip1') }}</div>
        <div class="rules">2.{{ $t('anniversary.notes1') }}</div>
        <div class="rules">3.{{ $t('anniversary.notes3') }}</div>
        <div class="rules">4.{{ $t('anniversary.notes2') }}</div>
      </div>
    </div>
    <!-- 图片释放时间 -->
    <div class="timeExplain">
      <div class="title">{{ $t('anniversary.dailyRelease') }}</div>
      <div class="timeExplainCont">
        <div class="timeExplainUl flex">
          <div class="timeExplainList">
            <div>{{ $t('anniversary.map1') }}</div>
            <div v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">08:00</div>
            <div v-else>00:00</div>
          </div>
          <div class="timeExplainList">
            <div>{{ $t('anniversary.map2') }}</div>
            <div v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">11:00</div>
            <div v-else>03:00</div>
          </div>
          <div class="timeExplainList">
            <div>{{ $t('anniversary.map3') }}</div>
            <div v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">14:00</div>
            <div v-else>06:00</div>
          </div>
        </div>
        <div class="timeExplainUl flex">
          <div class="timeExplainList">
            <div>{{ $t('anniversary.map4') }}</div>
            <div v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">17:00</div>
            <div v-else>09:00</div>
          </div>
          <div class="timeExplainList" :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'padding-right: 40px' : ''">
            <div>{{ $t('anniversary.map5') }}</div>
            <div v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">20:00</div>
            <div v-else>12:00</div>
          </div>
          <div class="timeExplainList">
            <div>{{ $t('anniversary.map6') }}</div>
            <div v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">23:00</div>
            <div v-else>15:00</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 邀请好友 -->
    <div class="shareFriend">
      <div class="title">{{ $t('anniversary.yqqb') }}</div>
      <div class="copy clearfix">
        <span class="fl fn-text1"  style="-webkit-box-orient: vertical;">{{ $t('anniversary.awardCopyUrl') }}</span>
        <span class="fr"
          v-clipboard:copy="$t('anniversary.awardCopyUrl')"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError">{{ $t('anniversary.tellFriend') }}</span>
      </div>
    </div>
    <!-- 发布时间 -->
    <div class="sharetime">
      <div class="tab line flex">
        <div :class="{'active': item.id === active}"
        v-for="(item, index) in tabList" :key="index"
        @click="handleGetImgList(item.time, index + 1)">
          {{ item.name }}
        </div>
      </div>
      <div class="content" v-for="(item, index) in contentList" :key="index">
        <div class="flexb shareWord">
          <div class="shareWordTime" v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">{{ item.cnTime }}</div>
          <div class="shareWordTime" v-else>{{ item.enTime }}</div>
          <div class="shareWordTime shareWordTime1" v-show="item.account">
            {{ $t('order.account') }}: {{ item.account }}
          </div>
        </div>
        <div class="backImg" v-if="item.imgUrl">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="backImg" v-else>{{ $t('ndxStake.comingSoon') }}</div>
        <div class="flexb codeInput" v-if="item.isCrackPic === 0">
          <el-input
            :placeholder="$t('anniversary.treasureInput')"
            class="inputWord"
            v-model.trim="codeUrl[index]"
            maxlength="200"></el-input>
          <el-button type="primary" @click="handleAutorized(index, codeUrl[index])" class="inputBtn">
            {{ $t('anniversary.submitveri') }}
            <span v-if="$store.state.app.scatter && $store.state.app.scatter.identity">
              ({{ $t('anniversary.numTimes', { number: item.remainCountPic}) }})
            </span>
          </el-button>
        </div>
        <div class="center fontStyle" v-else-if="item.isCrackPic === 1">{{ $t('anniversary.treasureGet') }}</div>
      </div>
    </div>
    <!-- 验证结果弹窗 -->
    <el-dialog
      class="resultDialog"
      :show-close='true'
      :visible.sync="resultHide"
      :close-on-click-modal="false"
      width="500px">
      <div class="resultCont">
        <p class="center" v-if="resultStatus === 1">{{ $t('anniversary.treasureTitle1') }}</p>
        <p class="center" v-else-if="resultStatus === 2">{{ $t('anniversary.treasureTitle2') }}</p>
        <p class="resultWord" v-if="resultStatus === 1">{{ pk }}</p>
        <p class="resultWord center" v-else-if="resultStatus === 2">{{ $t('anniversary.treasureText') }}</p>
        <p class="center" v-else>{{ $t('anniversary.treasureTitle3') }}</p>
        <div class="resultTip" v-if="resultStatus === 1 || resultStatus === 2">
          <p>{{ $t('anniversary.tips') }}:</p>
          <p>{{ $t('anniversary.treasureDesc1') }}</p>
          <p>{{ $t('anniversary.treasureDesc2') }}</p>
          <p>{{ $t('anniversary.treasureDesc3') }}</p>
        </div>
        <div class="flexc btnWrap">
          <el-button
            type="primary"
            class="center btn"
            v-if="resultStatus === 1"
            v-clipboard:copy="pk"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError">
            {{ $t('anniversary.treasureCopy') }}
          </el-button>
          <el-button type="primary" class="center btn" v-else @click="resultHide = false;">
            {{ $t('anniversary.tipsConfirm') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { toLocalTime, authorized } from '@/utils/validate';

export default {
  name: 'treasureHunt', // 寻宝活动
  data() {
    return {
      time: '', // 今日时间 格式：2019-08-08
      active: 0, // 选中
      tabList: [{
        id: 1,
        name: this.$t('anniversary.annualCarnivalTime4'),
        time: '2019-08-08'
      }, {
        id: 2,
        name: this.$t('anniversary.annualCarnivalTime5'),
        time: '2019-08-09'
      }, {
        id: 3,
        name: this.$t('anniversary.annualCarnivalTime6'),
        time: '2019-08-10'
      }, {
        id: 4,
        name: this.$t('anniversary.annualCarnivalTime7'),
        time: '2019-08-11'
      }],
      contentListDefault: [{
        enTime: '00:00',
        cnTime: '08:00',
        imgUrl: '',
      }, {
        enTime: '03:00',
        cnTime: '11:00',
        imgUrl: '',
      }, {
        enTime: '06:00',
        cnTime: '14:00',
        imgUrl: '',
      }, {
        enTime: '09:00',
        cnTime: '17:00',
        imgUrl: '',
      }, {
        enTime: '12:00',
        cnTime: '20:00',
        imgUrl: '',
      }, {
        enTime: '15:00',
        cnTime: '23:00',
        imgUrl: '',
      }],
      contentList: [],
      dateStr: '',
      timer: null,
      accountArr: [
        ['treasure1112', 'treasure1113', 'treasure1114', 'treasure1115', 'treasure2221', 'treasure2223'],
        ['treasure2224', 'treasure2225', 'treasure3331', 'treasure3332', 'treasure3334', 'treasure3335'],
        ['treasure4441', 'treasure4442', 'treasure4443', 'treasure4445', 'treasure5551', 'treasure5552'],
        ['treasure5553', 'treasure5554', 'treasure1122', 'treasure2233', 'treasure3344', 'treasure4455'],
      ],
      resultHide: false, // 验证结果弹窗
      resultStatus: 2, // 验证结果状态值
      codeUrl: [], // 秘钥结果
      pk: '',
    }
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetImgList(this.dateStr);
      this.tabList = [{
        id: 1,
        name: this.$t('anniversary.annualCarnivalTime4'),
        time: '2019-08-08'
      }, {
        id: 2,
        name: this.$t('anniversary.annualCarnivalTime5'),
        time: '2019-08-09'
      }, {
        id: 3,
        name: this.$t('anniversary.annualCarnivalTime6'),
        time: '2019-08-10'
      }, {
        id: 4,
        name: this.$t('anniversary.annualCarnivalTime7'),
        time: '2019-08-11'
      }]
    }
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.handleGetTime();
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  },
  methods: {
    handleGetTime() {
      this.$http.post('/common/getTimestamp').then((res) => {
        this.time = toLocalTime(res);
        if (this.time === '2019-08-08') {
          this.active = 1;
        } else if (this.time === '2019-08-09') {
          this.active = 2;
        } else if (this.time === '2019-08-10') {
          this.active = 3;
        } else if (this.time === '2019-08-11') {
          this.active = 4;
        }
        this.handleGetImgList(this.time);
      });
    },
    handleGetImgList(dateStr, index) {
      if (index) {
        this.active = index;
      }
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.dateStr = dateStr;
      const params = {
        dateStr
      };
      this.$http.post('/anniversary/getTreasureMap', params).then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.contentListDefault.forEach((v, i) => {
          const vv = v;
          vv.imgUrl = res[`picUrl${(i + 1)}`];
          vv.account = this.accountArr[this.active - 1][i];
          vv.isCrackPic = res[`isCrackPic${(i + 1)}`];
          vv.remainCountPic = res[`remainCountPic${(i + 1)}`];
        });
        const findex = this.contentListDefault.findIndex(v => !v.imgUrl);
        if (findex !== -1) {
          this.contentList = this.contentListDefault.filter((v, i) => i <= findex);
          // 不显示是否已被领取
          this.contentList[findex].isCrackPic = 2;
        } else {
          this.contentList = this.contentListDefault;
        }
        // this.codeUrl = this.contentList.map((v, i) => `input${i}`);
        this.timer = setTimeout(() => {
          this.handleGetImgList(this.dateStr);
        }, 3000);
      });
    },
    // 验证操作
    handleAutorized(picCode, result) {
      // 判断所属链是否为eos
      const accountInfo = this.$store.state.app.accountInfo;
      if (accountInfo && accountInfo.chain !== 'eos') {
        this.$message.warning(this.$t('anniversary.plstoEos'));
        return;
      }
      if (!result) {
        this.$message.error(this.$t('anniversary.privateKey'));
        return;
      }
      const scatter = this.$store.state.app.scatter;
      if (scatter && !scatter.identity) {
        this.handleWalletPermission();
        return;
      }
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          this.handleVerification(picCode, result);
        });
        return;
      }
      this.handleVerification(picCode, result);
    },
    handleVerification(picCode, result) {
      const code = `${this.dateStr.split('-').join('')}-${picCode + 1}`;
      const params = {
        picCode: code,
        result
      };
      this.$http.post('/anniversary/checkTreasureMap', params).then((res) => {
        // 结果错误 再接再厉
        if (res.code === 1031) {
          this.handleGetImgList(this.dateStr);
          this.resultHide = true;
          this.resultStatus = 2;
          return;
        }
        // 超过最大次数
        if (res.code === 1032) {
          this.$message.error(this.$t('anniversary.none'));
          return;
        }
        // 已被破解
        if (res.code === 1030) {
          this.handleGetImgList(this.dateStr);
          this.resultHide = true;
          this.resultStatus = 3;
          return;
        }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.handleGetImgList(this.dateStr);
        this.resultHide = true;
        this.resultStatus = 1;
        this.pk = res.pk;
      });
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      sessionStorage.setItem('checkWalletByChain', 'EOS');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
  },
}
</script>
<style lang="scss" scoped>
.treasureHunt {
  color: #fff;
  background: #020F3C;
  min-height: 1500px;
  padding-bottom: 30px;
  margin-bottom: -1px;

  .title {
    font-size: 28px;
    color: #FFC78A;
    text-align: center;
    margin: 100px 0 30px 0;
  }

  .banner {
    height: 545px;
    background: url('../../../assets/img/activity/anniversary/banner1.png') center center no-repeat;
    background-size: 100% 100%;
    padding-top: 100px;

    img {
      display: block;
      width: 400px;
      margin: 0 auto 0;
    }
  }

  .rulesCont {
    font-size: 21px;
    width: 890px;
    margin: auto;
    padding: 30px 60px 30px 90px;
    background-image: linear-gradient(0deg, rgba(68,112,226,0.13) 0%, rgba(69,120,234,0.00) 100%);
    box-shadow: inset 0 0 18px 0 rgba(255,255,255,0.26);
    border-radius: 14px;

    .rules {
      line-height: 40px;
    }

    .tag {
      position: relative;
      font-size: 21px;
      line-height: 40px;

      .wordList {
        span {
          display: inline-block;
        }

        span:nth-child(1) {
          width: 10%;
          vertical-align: top;
        }

        span:nth-child(2) {
          width: 89%;
        }
      }

      &::before {
        position: absolute;
        top: 18px;
        left: -30px;
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #526EEE;
        border-radius: 50%;
      }
    }
  }

  .timeExplain {
    width: 890px;
    margin: auto;

    .timeExplainCont {
      padding: 65px 100px;
      background-image: linear-gradient(-180deg, rgba(68,112,226,0.37) 0%, rgba(69,120,234,0.00) 100%);
      border-radius: 14px;
      border: 1px solid #4C6BED;

      .timeExplainUl {
        margin-bottom: 50px;
        justify-content: space-between;

        .timeExplainList {
          div:nth-child(1) {
            font-size: 21px;
            color: #F2DBA4;
            margin-bottom: 10px;
          }

          div:nth-child(2) {
            font-size: 27px;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .shareFriend {
    width: 824px;
    margin: 0 auto;

    .copy {
      height: 60px;

      span:nth-child(1) {
        width: 624px;
        padding: 0 10px;
        background: #fff;
        font-size: 18px;
        color: #9B9B9B;
        line-height: 60px;
        border-radius: 7px 0 0 7px;
      }

      span:nth-child(2) {
        width: 200px;
        padding: 0 10px;
        font-size: 18px;
        color: #8B572A;
        line-height: 60px;
        background-image: linear-gradient(0deg, #E5AE65 0%, #FFEA7A 100%);
        border-radius: 0 7px 7px 0;
        text-align: center;
        cursor: pointer;
      }
    }
  }

  .sharetime {
    width: 820px;
    margin: 130px auto 70px;

    .tab {
      justify-content: space-between;
      position: relative;

      div {
        position: relative;
        width: 134px;
        height: 62px;
        line-height: 62px;
        border-radius: 11px;
        text-align: center;
        border: 2px solid #fff;
        background: #020F3C;
        cursor: pointer;

        &.active {
          background-image: linear-gradient(-132deg, rgba(68,92,241,0.96) 0%, #3952C1 100%);
          border: 2px solid #0069FF;
        }
      }

      &.line::before {
        content: '';
        position: absolute;
        display: block;
        top: 50%;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #fff;
      }
    }

    .content {
      padding: 40px 170px;

      .shareWordTime {
        color: #4A90E2;
        font-size: 30px;
        margin-bottom: 10px;
      }

      .shareWordTime1 {
        font-size: 20px;
      }

      .backImg {
        margin: 0 auto;
        width: 480px;
        height: 480px;
        background: #fff;
        color: #278EDA;
        font-size: 26px;
        text-align: center;
        line-height: 480px;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .codeInput {
        margin-top: 20px;

        .inputWord {
          width: 65%;
        }

        .inputBtn {
          width: 34%;
        }
      }

      .fontStyle {
        font-size: 20px;
        color: #fff;
        margin-top: 40px;
      }
    }
  }

  .resultCont {
    padding: 0 30px;

    .resultWord {
      padding: 0 60px;
      font-size: 24px;
      color: #278eda;
      margin: 15px 0;
    }

    .btnWrap {
      .btn {
        margin-top: 30px;
        width: 200px;
      }
    }

    .resultTip {
      margin-top: 30px;

      p {
        margin-bottom: 5px;
      }
    }
  }
}
</style>

